<template>
  <div v-for="(item, index) in layoutArr" :key="index">
    <Vue3DraggableResizable
      :x="item.x"
      :y="item.y"
      :w="item.w"
      :h="item.h"
      :draggable="true"
      :resizable="true"
      @dragging="item.print(index, $event)"
      @resizing="item.print(index, $event)"
    >
      <slot :name="item.beforSlot"></slot>
      <component :is="item.name" :options="item.options"></component>
    </Vue3DraggableResizable>
  </div>
</template>

<script>
import practice1 from "./encapsulation/practice1.vue";
import practice2 from "./encapsulation/practice2.vue";
import practice3 from "./encapsulation/practice3.vue";
import practice4 from "./encapsulation/practice4.vue";
import practice5 from "./encapsulation/practice5.vue";


export default {
  components: { practice1, practice2, practice3, practice4,practice5 },
  props: {
    layoutArr: Array,
  },
};
</script>
